<template>
	<view id="history" class="digital-page">
		<view class="top-banner">
			<image src="../../static/Dp/Logo_487x93.png" mode="widthFix"></image>
		</view>
		<view class="banner">
			<view class="title-area">
				<div class="title-cn">发展历程</div>
				<div class="title-en">Historical</div>
			</view>
		</view>
		<view class="main-content">
			<view class="block timeline">
				<view class="header">
					历史渊源
				</view>
				<image mode="widthFix" src="https://www.lin-home.com/static/DigitalPlatform/发展历程/timeline.png" ></image>
			</view>
			<template v-for="(v, k) in data" :key="k" >
				<view class="block news">
					<image :src="v.FeaturedImage" mode="widthFix"></image>
					<view class="content">
						<view class="title">
							{{ v.Topic }}
						</view>
						<view class="abstract">
							{{ v.Abstract }}
						</view>
					</view>
					<navigator class="btn" :url="`/pages/Community/NewsDetail?uniqueCode=${v.UniqueCode}`">
						浏览更多
					</navigator>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	// 黄玺 @ 9月9日 添加页面
	import { onLoad } from '@dcloudio/uni-app'
	import backBtn from './back.vue'
	import { ref } from 'vue'
	import parseHtmlData from './parseHtmlData.js'
	import { domain } from '../../stores/useApp';
	import setShare from '../../share.js'
	setShare({
		title: '历史渊源 - 云上埔坪',
		path: "/pages/DigitalPlatform/History"
	});
	let uniqueCode = "7KAbcm3FIi038rK5jdhGGM";
	let data = ref([]);
	uni.post("/api/categorySource", {
		uniqueCode,
		hasContent: false,
		pageSize: 2
	}).then(msg => {
		for (let d of msg.data) {
			let obj = {
				UniqueCode: d.UniqueCode,
				FeaturedImage: `${domain}${d.FeaturedImage}`,
				Abstract: d.Abstract,
				Topic: d.Topic
			}
			data.value.push(obj);
		}
	});
	
	function richTextClick (imgs) {
		if (imgs.length) {
			wx.previewImage({
				current: imgs[0], // 当前显示图片的http链接
				urls: imgs
			})
		}
	}
</script>

<style lang="less">
	@import url(shared.less);
	@title-size: 32rpx;
	@mini-size: 22rpx;
	@content-size: 25rpx;
	@floor-size: 19rpx;
	@font-color: #A1A6AE;

	#history {
		.banner {
			.show-bg("https://www.lin-home.com/static/DigitalPlatform/发展历程/banner.jpg")
		}
		.title-area {
			width: calc(32rpx * 22);
		}

		.main-content {
			padding-bottom: 30rpx;
			.timeline {
				image {
					width: 100%;
				}
			}
			
			.news {
				display: flex;
				color: @text-color;
				position: relative;
				image {
					display: block;
					margin-right: 20rpx;
					flex: 1;
				}
				.content {
					flex: 1;
					font-size: 14px;
					.title {
						font-weight: bold;
						margin-bottom: 10rpx;
					}
				}
				.btn {
					display: block;
					position: absolute;
					right: 30rpx;
					bottom: 25rpx;
					color: #7F7F7F;
					background-color: #E3DAD1;
					font-size: 14px;
					line-height: 24px;
					padding: 0rpx 20rpx;
					border-radius: 20rpx;
				}
			}
		} // .main-content
	}
</style>